import RoomBaseMixin from "./RoomBaseMixin";
import { HubConnectionBuilder } from "@aspnet/signalr";
import MsgMethods from "@/consts/MsgMethods";

export default {
    mixins: [RoomBaseMixin],
    methods: {
        // 聊天窗口是不是滚动到了底部
        isScrollToBottom() {
            const win = document.querySelector('.tree-hole-room-messages')
            return win.scrollHeight == win.offsetHeight + win.scrollTop; // 滚动条高度 = 元素的高度 + 滚动的高度
        },
        // 聊天窗口滚动到最底部
        scrollToBottom() {
            // 处理滚动条
            this.$nextTick(() => {
                const message_box = this.$refs.message_box;
                if (!message_box) return;
                message_box.scrollTop = message_box.scrollHeight;
            });
        },
        // 接收到进入房间socket事件
        enterRoom(enterMsg) {
            if (enterMsg.roomId != this.roomId) return;
            this.messages.push(enterMsg);
        },
        // 接受到离开房间scoket事件
        leaveRoom(leaveMsg) {
            if (leaveMsg.roomId != this.roomId) return;
            this.messages.push(leaveMsg);
        },
        // 接受到文本消息socket事件
        receiveMsg(textMsg) {
            if (textMsg.roomId != this.roomId) return;
            if (textMsg.maskId == this.mask.id) return; // 自己发的不处理

            if (!this.$refs.richbox) return;
            textMsg.msg = this.$refs.richbox.content2HtmlContent(textMsg.msg);
            this.messages.push(textMsg);
            if (this.isScrollToBottom()) this.scrollToBottom();
        },
        // 接受到图片消息
        receivePicMsg(picMsg) {
            if (picMsg.roomId != this.roomId) return;
            if (picMsg.maskId == this.mask.id) return; // 自己发送的图片消息不处理
            console.log(picMsg);

            const isScrollToBottom = this.isScrollToBottom();
            this.messages.push(picMsg);
            if (isScrollToBottom) this.scrollToBottom();
        },
        // 房间被删除
        roomDestroy(msg) {
            if (msg.roomId != this.roomId) return;
            this.$router.back(); //退出房间
        },
        // 被踢出房间
        onKickoutMsg(msg) {
            if (msg.maskId == this.mask.id) {
                this.$router.push({ name: 'hall' });
                this.$Message.warn('你被移除了房间')
            } else {
                this.messages.push(msg);
            }
        }
    },
    created() {
        const roomId = this.$route.params.id;
        const hub =
            process.env.NODE_ENV == "development" ? "/ws/chatHub" : "/chatHub";
        this.connection = new HubConnectionBuilder().withUrl(hub).build();
        // 绑定 消息事件
        this.connection.on(MsgMethods.RoomText, this.receiveMsg.bind(this));
        this.connection.on(MsgMethods.RoomEnter, this.enterRoom.bind(this));
        this.connection.on(MsgMethods.RoomLeave, this.leaveRoom.bind(this));
        this.connection.on(MsgMethods.RoomDestroy, this.roomDestroy.bind(this));
        this.connection.on(MsgMethods.RoomPic, this.receivePicMsg.bind(this));
        const method = `${roomId}_kickout`;
        this.connection.on(method, this.onKickoutMsg.bind(this));
        this.connection.start(); // 启动连接
    }
};